<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>大文件上传demo</title>
        <style>
            progress {
                width: 80vw;
                min-height: 2.2rem;
                color: white;
                vertical-align: 0;
            }
            #uploadBtn {
                cursor: pointer;
            }
            .progress {
                position: relative;
                margin-top: 20px;
                display: flex;
                align-items: center;
            }

            span {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate3d(-50%, -50%, 0);
                color:rosybrown;
                z-index: 88;
            }
        </style>
    </head>
    <body>
        <div>
            <input type="file" onchange="handleFileChange(event)" />
            <button id="uploadBtn" onclick="handleUpload(event)">上传</button>
        </div>

        <div class="progress">
            <label for="progress">文件上传进度：</label>
            <progress id="progress" max="100" value="0">
                <span id="uploadProgressSpan">0</span>
            </progress>
        </div>
        <div class="progress">
            <label>hash计算进度：</label>
            <progress id="hashProgress" max="100" value="0">
                <span id="hashProgressSpan">0</span>
            </progress>
        </div>
        <div id="result">
            <a href="" id="fileURL"></a>
            <span id="cost"></span>
        </div>

        <!-- <video
            src="/file/录制_2021_09_17_19_25_01_619_0002.mp4"
            controls
            controlslist="nodownload"
        ></video> -->

        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="./spark-md5.js"></script>
        <script src="./queue.js"></script>
        <script src="./limit.js"></script>
        <script src="./app.js"></script>

        <script>
            // const video = document.querySelector('video');
            // video.addEventListener('contextmenu', e => {
            //     e.preventDefault();
            // });
        </script>
    </body>
</html>
